<template>
  <div class="app-container" style="height: 100%">
    <div class="app-container-inner" style="display: flex; flex-direction: column">
      <!-- 按钮组 & 搜索条件 -->
      <div class="header">
        <div class="btn_group">
          <!-- <HPlainButton @click="handleShowAddOrEditEmpModal(true)"> 新增工程师 </HPlainButton>
          <HPlainButton @click="$router.push({ path: 'empExcelImport' })">
            导入工程师
          </HPlainButton> -->
        </div>
        <!-- 搜索条件 -->
        <div class="search_filter">
          <!-- 日期范围 -->
          <div class="date-range">
            <DateRange ref="dateRangeRef" @change="handleDateChange" />
          </div>
          <el-input
            style="width: 220px"
            @keyup.enter="requestEmpListApi"
            @clear="requestEmpListApi"
            clearable
            v-model="search.userSearch"
            placeholder="服务商名称/服务人员名称/手机号"
          />
          <HButton type="primary" @click="requestEmpListApi">
            <el-icon>
              <Search />
            </el-icon>
            搜索
          </HButton>
          <HButton @click="clearValue">
            <el-icon>
              <RefreshRight />
            </el-icon>
            重置
          </HButton>
        </div>
      </div>
      <!-- 表单内容 -->
      <div class="table" style="flex: 1; position: relative">
        <el-table
          :border="true"
          :data="empList"
          v-loading="loading"
          element-loading-text="加载中..."
          height="100%"
          style="position: absolute"
        >
          <template #empty>
            <el-empty description="暂无数据" />
          </template>

          <!-- 序号 -->
          <el-table-column label="序号" type="index" width="50" align="center" />

          <!-- 姓名 -->
          <el-table-column show-overflow-tooltip label="姓名" prop="userName" width="100" />

          <!-- 手机号 -->
          <el-table-column show-overflow-tooltip label="手机号" prop="userPhone" width="108" />

          <!-- 接单策略 -->
          <el-table-column label="接单策略" prop="autoSureReceiveOrder" width="120">
            <template #default="scope">
              <span>{{ scope.row.autoSureReceiveOrder ? '自动确认接单' : '手动确认接单' }}</span>
            </template>
          </el-table-column>

          <!-- 所属服务商 -->
          <el-table-column show-overflow-tooltip label="所属服务商" prop="network" width="200" />

          <!-- 在职状态 -->
          <el-table-column show-overflow-tooltip prop="quit" label="在职状态" width="74">
            <template #default="scope">
              <HStatus type="info" v-if="scope.row.quit">离职</HStatus>
              <HStatus v-else>在职</HStatus>
            </template>
          </el-table-column>

          <!-- 技能 -->
          <el-table-column show-overflow-tooltip prop="networkEmpSkill" label="技能" width="200" />

          <!-- 等级 -->
          <el-table-column show-overflow-tooltip prop="networkEmpLevel" label="等级" width="70" />

          <!-- 创建时间 -->
          <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" width="128" />

          <!-- 更新时间 -->
          <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" width="128" />

          <!-- 操作 -->
          <el-table-column show-overflow-tooltip fixed="right" label="操作" width="60">
            <template #default="scope">
              <HLink @click="handleShowAddOrEditEmpModal(false, scope.row)">详细</HLink>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <Pagination
          ref="pagination"
          :list_total="total"
          @size-change="requestEmpListApi"
          @current-change="requestEmpListApi"
        />
      </div>
    </div>
    <SelfDefined
      :assignDialog="addDialog"
      @assign-dialog="addDialog = false"
      :empInfo="empInfo"
      :is-add="isAdd"
      @update-list="requestEmpListApi()"
    />
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import Pagination from '@/components/Pagination/index.vue'
  import { getEmpList } from '@/api/network'
  import SelfDefined from '../../emp/components/SelfDefined.vue'
  import DateRange from '@/components/DateRange.vue'
  import { RefreshRight, Search } from '@element-plus/icons-vue'
  import { Emp } from './types'
  import HButton from '@/components/common/button/HButton.vue'
  import HStatus from '@/components/common/status/HStatus.vue'
  import HLink from '@/components/common/link/HLink.vue'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.network.networkEmpList,
  })

  // 添加服务人员弹窗的显示状态
  const addDialog = ref(false)

  // 动画加载
  const loading = ref(false)

  // 服务人员列表总数量
  const total = ref(0)

  // 服务人员列表
  const empList = ref<Array<Emp>>([])

  // 开始日期
  const startDate = ref('')

  // 结束日期
  const endDate = ref('')

  // 开始日期是否大于结束日期
  const isStartDateGreaterThanEndDate = ref(false)
  const pagination = ref()
  // 服务人员搜索对象
  const search = ref({
    page: 0,
    limit: 0,
    userSearch: '', // 服务商名称/服务人员名称/手机号
    startTime: '', // 创建开始时间
    endTime: '', // 创建结束时间
  })

  // 是否为添加
  const isAdd = ref(false)

  /**
   * 日期更新事件
   * @param {Object} param 返回的参数
   * @param {string} param.startDate 开始日期
   * @param {string} param.endDate 结束日期
   * @param {boolean} param.isStartDateGreaterThanEndDate 开始日期是否大于结束日期
   */
  const handleDateChange = (param: {
    startDate: string
    endDate: string
    isStartDateGreaterThanEndDate: boolean
  }) => {
    startDate.value = param.startDate
    endDate.value = param.endDate
    isStartDateGreaterThanEndDate.value = param.isStartDateGreaterThanEndDate
    if (param.isStartDateGreaterThanEndDate) {
      ElMessage({
        type: 'error',
        message: '开始日期不能大于结束日期',
      })
    }
  }

  /**
   * 获取服务人员列表
   */
  const requestEmpListApi = async () => {
    if (isStartDateGreaterThanEndDate.value) {
      ElMessage({
        type: 'error',
        message: '开始日期不能大于结束日期',
      })
      return
    }
    search.value.startTime = startDate.value ? startDate.value : ''
    search.value.endTime = endDate.value ? endDate.value : ''
    ;(search.value.page = pagination.value.current), //当面页码
      (search.value.limit = pagination.value.size), //每页显示数量
      (loading.value = true)
    const res = await getEmpList(search.value)
    loading.value = false
    if (!res.data.success) {
      if (res.data.isError) ElMessage.error(res.data.message)
    }
    total.value = Number(res.data?.data.total)
    empList.value = res.data?.data.rows
  }

  // DateRange组件实例
  const dateRangeRef = ref<InstanceType<typeof DateRange> | null>(null)

  /**
   * 清空搜索条件
   */
  const clearValue = () => {
    startDate.value = ''
    endDate.value = ''
    if (dateRangeRef.value) {
      dateRangeRef.value.resetDateRange()
    }
    isStartDateGreaterThanEndDate.value = false
    search.value.userSearch = ''
    requestEmpListApi()
  }

  // 员工信息
  const empInfo = ref<Emp | null>(null)

  /**
   * 添加or修改员工信息
   * @param {boolean} _isAdd 是否为添加员工
   * @param {Emp | undefined} info 员工信息
   */
  function handleShowAddOrEditEmpModal(_isAdd: boolean, info?: Emp) {
    addDialog.value = true
    isAdd.value = _isAdd
    if (info) {
      empInfo.value = info
    }
  }

  onMounted(() => {
    requestEmpListApi()
  })
</script>

<style scoped lang="scss">
  @import './index.scss';
</style>
